<template>
  <div class="person">
    <!--    单向绑定:value-->
    <!--    双向绑定:model-->
    姓：<input type="text" v-model="firstName"><br>
    名：<input type="text" v-model="lastName"><br>
    全名：<span>{{ fullName }}</span>
    <button @click="changeFullName">将全名改为li-si</button>
  </div>

</template>
<script setup lang="ts">
import {computed, ref} from "vue";

let firstName = ref('张')
let lastName = ref('三')

// 方法是没有缓存的，但计算属性是有缓存的
// 这么定义的计算属性是只读的
/*let fullName = computed(() => {
  return firstName.value + lastName.value
})*/

// 这么定义的计算属性是可读可写
let fullName = computed({
  get() {
    return firstName.value + lastName.value
  },
  set(val) {
    const [str1,str2]=val.split('-')
    firstName.value=str1
    lastName.value=str2
  }
})

function changeFullName() {
  fullName.value='li-si'//触发fullName的set方法
}
</script>
<style scoped>
.person {
  background-color: #e7abab;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 5px;
}
</style>